<template>
  <div id="stopdialog">
    <commonformdialog :isshowDialogs="isshowDialog" :isshowconfirmbtn="false" :dialogWidth="'42%'" :enterTitle="false"
      :isshowimportTitle="false" :dialogTitle="diatitle" @closetextDialog="closetextDialog" @confirmbtn='confirmbtn'
      :topHeight='"10vh"'>

      <!-- 表单区域 -->
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" :validate-on-rule-change="false">
        <el-row>

          <el-col :span="12">
            <el-row>
              <el-form-item label="优惠券名称" prop="title">
                <el-input v-model="formData.title" placeholder="请输入优惠名称" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-form-item label="优惠券分类" prop="category">
                <el-select v-model="formData.category" placeholder="请选择优惠券分类" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in categoryOptiopn" :key="index" :label="item.title" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12"  v-if="!showShiwu">
            <el-row>
              <el-form-item label="优惠券类型" prop="type">
                <el-select v-model="formData.type" placeholder="请选择优惠券类型" clearable :style="{width: '100%'}" :disabled="showShiwu || showDj">
                  <el-option v-for="(item, index) in couponOptiopn" :key="index" :label="item.title" :value="item.id"
                    :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="24" v-if="showShiwu">
            <el-row>
              <el-form-item label="实物内容" prop="coupon_thing">
                <el-input v-model="formData.coupon_thing" placeholder="请输入实物具体内容(带数量及量词),如:1部iphone12" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-row>
          </el-col>


          <el-col :span="12" v-if="!showShiwu">
            <el-row>
              <el-form-item label="优惠券金额" prop="coupon_money">
                <el-input v-model="formData.coupon_money" placeholder="请输入优惠金额" clearable :style="{width: '100%'}">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-form-item label="优惠券总量" prop="coupon_count">
                <el-input v-model="formData.coupon_count" placeholder="0表示不限" clearable :style="{width: '100%'}">
                  <template slot="append">张</template>
                </el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-form-item label="订单价大于" prop="coupon_rule">
                <el-input v-model="formData.coupon_rule" placeholder="请输入订单价大于" clearable :style="{width: '100%'}">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-form-item label="每人限领" prop="coupon_limit">
                <el-input v-model="formData.coupon_limit" placeholder="请输入每人限领" clearable :style="{width: '100%'}">
                  <template slot="append">张</template>
                </el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-form-item label="开始时间" prop="coupon_start">
                <el-date-picker v-model="formData.coupon_start" placeholder="请选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :style="{width: '100%'}" clearable></el-date-picker>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-form-item label="结束时间" prop="coupon_end">
                <el-date-picker v-model="formData.coupon_end" placeholder="请选择结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :style="{width: '100%'}" clearable></el-date-picker>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-form-item label="有效时间" prop="validity_term">
                <div class="validity_term">
                  <span>领取后</span>
                  <el-input v-model="formData.validity_term" placeholder="请输入" clearable :style="{width: '100%'}">
                    <template slot="append">天</template>
                  </el-input>
                  <span>内有效</span>
                </div>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

    </commonformdialog>
  </div>
</template>

<script>
  //引入弹窗
  import commonformdialog from '@/components/commondialog/commondialog'
  import {
    getSessionStorage
  } from '@/utils/accessToken'
  //api
  import {
    createcoupon,
    editupdate,
    getreadInfo
  } from '@/api/coupon'
  export default {
    data() {
      return {
        showShiwu: false,
        showDj: false,
        formData: {
          category: '',
          title: '',
          type: '',
          coupon_money: '',
          coupon_count: '',
          coupon_rule: '',
          coupon_limit: '',
          coupon_start: '',
          coupon_end: '',
          validity_term: '',
          coupon_thing: ''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入优惠券名称',
            trigger: 'change'
          }],
          coupon_thing: [{
            required: true,
            message: '请输入实物内容',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '请选择优惠券类型',
               trigger: ['blur','change']
          }],
          category: [{
            required: true,
            message: '请选择优惠券类型',
            trigger: 'change'
          }],
          coupon_money: [{
            required: true,
            message: '请输入优惠金额',
            trigger: 'blur'
          }],
          coupon_count: [{
            required: true,
            message: '请输入优惠总数量',
            trigger: 'blur'
          }],
          coupon_rule: [{
            required: true,
            message: '请输入订单价大于',
            trigger: 'blur'
          }],
          coupon_limit: [{
            required: true,
            message: '请输入每人限领',
            trigger: 'blur'
          }],
          coupon_start: [{
            required: true,
            message: '请至少选择开始时间',
            trigger: 'change'
          }],
          coupon_end: [{
            required: true,
            message: '请至少选择结束时间',
            trigger: 'change'
          }],
          validity_term: [{
            required: true,
            message: '请输入有效时间',
            trigger: 'blur'
          }]
        },
        couponOptiopn: [],
        categoryOptiopn: [],
      }
    },
    components: {
      commonformdialog,
    },
    props: {
      //是否显示弹窗
      isshowDialog: {
        type: Boolean,
        default: false,
      },
      //是编辑还是新增
      formType: {
        type: Number,
        default: 0
      },
      //弹窗标题
      diatitle: {
        type: String,
        default: '弹窗'
      },
      //弹窗编辑回填数据
      dialogContent: {
        type: Object,
        default: {}
      }
    },
    methods: {
      //关闭弹窗
      closetextDialog() {
        this.$refs['elForm'].resetFields()
        this.$emit('closeDialog')
      },
      //点击确认
      confirmbtn() {
          this.$refs['elForm'].validate(async valid => {
            if (!valid) return
           this.submitForm()
          })
      },
      async submitForm(){
        if (this.formType === 0) {
          delete this.formData.id
          let data = await createcoupon(this.formData)
          if (data.code == '0000') {
            this.$message.success('新增优惠券成功！')
            this.$refs['elForm'].resetFields()
            this.$emit('confirm')
          }
        } else { //编辑
          let data = await editupdate(this.formData)
          if (data.code == '0000') {
            this.$message.success('编辑优惠券成功！')
            this.$refs['elForm'].resetFields()
            this.$emit('confirm')
          }
        }
      }
    },
    watch: {
      'formData.category': function(val) {
        if(val && this.formType==0){
          this.formData.type=''

        }
        if(val==155){
          this.rules.type=[{
            required: true,
            message: '请选择优惠券类型',
               trigger: ['blur','change']
          }]
        }else{
           this.rules.type=[]
        }
        if (val == 156) {
          this.showShiwu = true;
          this.showDj = false;
        } else if (val == 157) {
          this.showDj = true;
          this.showShiwu = false;
        } else {
          this.showDj = false;
          this.showShiwu = false;
        }

      }
    },
    mounted() {
      this.categoryOptiopn = getSessionStorage('Options')[31]
      this.$bus.on("editform", async (val) => {
        let data = await getreadInfo({
          id: val
        })
        let result = data.data
        let {
          id,
          category,
          title,
          coupon_money,
          coupon_count,
          coupon_rule,
          coupon_limit,
          coupon_start,
          coupon_end,
          type,
          validity_term,
          coupon_thing
        } = result
        this.formData = {
          category: category.value,
          title,
          type: type.value,
          coupon_money,
          coupon_count,
          coupon_rule,
          coupon_limit,
          coupon_start,
          coupon_end,
          id,
          validity_term,
          coupon_thing
        }
      });
      //获取优惠券类型选项
      this.couponOptiopn = getSessionStorage('Options')[25]
    },

    destroyed() {
      this.$bus.off("editform");
           this.$refs['elForm'].resetFields()
    }
  }
</script>

<style scoped lang='scss'>
  .validity_term {
    display: flex;
    align-items: center;
    flex: 1;

    span {
      width: 90px;

      &:last-child {
        margin-left: 5px;
      }
    }
  }
</style>
